<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="formData.channelName" clearable placeholder="渠道名称关键字" style="width: 160px;" class="filter-item" @keyup.enter.native="getData" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getData">
        搜索
      </el-button>
      <el-button v-waves class="filter-item" type="success" icon="el-icon-plus" @click="addChannel">
        增加
      </el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="渠道ID" align="center" prop="channelId" width="90"/>
      <el-table-column label="渠道名称" align="center" prop="channelName"/>
      <el-table-column label="提取码" align="center" prop="extractionCode"/>
      <el-table-column label="渠道单价(元)" align="center" prop="channelPrice" width="120"/>
      <el-table-column label="创建时间" align="center" prop="createTime"/>
      <el-table-column label="操作" class-name="status-col" width="200">
        <template slot-scope="scope">
          <el-button type="primary" @click="calculate(scope.row)">计算</el-button>
          <el-popconfirm
            :title="`确定删除${scope.row.channelName}吗？`"
            @onConfirm="delFun(scope.row)"
          >
            <el-button slot="reference" type="danger">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="formData.pageNum"
      :limit.sync="formData.pageSize"
      @pagination="getData"
    />

    <!-- 新增跑A渠道 -->
    <el-dialog title="新增跑A渠道" center :visible.sync="dialogFormVisible">
      <el-form :model="formSel">
        <el-form-item label="渠道" label-width="120px">
          <el-select placeholder="选择渠道" style="width: 180px;" v-model="formSel.channelId">
            <el-option :label="item.name" :value="item.id" v-for="(item,$y) in channelListData " :key="$y"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="渠道单价" label-width="120px">
          <el-input  autocomplete="off" v-model.number="formSel.channelPrice" style="width: 180px;"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addFun">新 增</el-button>
      </div>
    </el-dialog>

    <!-- 计算跑A渠道 -->
    <el-dialog title="计算跑A渠道" center :visible.sync="dialogFormVisibleCalculate">
      <el-form :model="formCalculate">
        <el-form-item label="渠道名称" label-width="120px">
          <el-input   disabled style="width: 180px;" v-model="formCalculate.channelName"></el-input>
        </el-form-item>
        <el-form-item label="返回单价" label-width="120px">
          <el-input  autocomplete="off" style="width: 180px;" v-model="formCalculate.num"></el-input>
        </el-form-item>
      </el-form>
      <el-table
        :data="profitRecords"
        border
        fit
        highlight-current-row
        style="width: 100%;"
        v-if="profitRecords && profitRecords.length > 0"
      >
        <el-table-column label="日期" align="center" prop="createTime" />
        <el-table-column label="返回注册数" align="center" prop="returnRegNum"/>
        <el-table-column label="返回单价" align="center" prop="returnPrice"/>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleCalculate = false;profitRecords = [];formCalculate.num = ''">取 消</el-button>
        <el-button type="primary" @click="subMit">保 存</el-button>
      </div>

    </el-dialog>

  </div>
</template>

<script>
import { getChannelData,delData,getChannel,addChannelProfit ,getChannelProfitRecords,addChannelProfitRecord } from '@/api/channel'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
export default {
  name: 'Phonelist',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      formData: {
        channelName: '',
        pageNum: 1,
        pageSize: 10,
      },
      tableData: [],
      total: 0,
      formSel: {
        channelId: '',
        channelPrice: ''
      },
      formCalculate: {
        num: ''
      },
      profitRecords: [],
      listLoading: false,
      dialogFormVisible: false,
      dialogFormVisibleCalculate: false
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData(){
      this.listLoading = true
      getChannelData(this.formData).then( res => {
        this.listLoading = false;
        console.log(res,126)
        if( res.data.code == '200' ){
          this.tableData = res.data.data.records
          this.total = res.data.data.total
        }
      })
    },
    calculate(item){
      this.formCalculate = {...this.formCalculate,...item}
      getChannelProfitRecords({
        channelId: item.channelId
      }).then( res => {
        if( res.data.code == 200 ){
          this.profitRecords = res.data.data
        } else {
          this.profitRecords = []
          this.$message.error(res.data.msg);
        }
      })
      this.dialogFormVisibleCalculate = true
    },
    delFun(item){
      console.log(item)
      delData(item.id).then( res => {
        if( res.data.code == '200' ){
          this.$message({
            message: res.data.data,
            type: 'success'
          });
          this.getData()
        }
      })
    },
    addChannel(){
      getChannel().then( res => {
        if( res.data.code == '200' ){
          this.channelListData = res.data.data;
          this.dialogFormVisible = true
        }
      })
    },
    addFun(){
      console.log(this.formSel)
      if( this.formSel.channelId == '' ){
        this.$message.error('请选择渠道');
        return false
      }
      if( this.formSel.channelPrice == '' ){
        this.$message.error('请输入单价');
        return false
      }
      addChannelProfit(this.formSel).then( res => {
        if( res.data.code == '200' ){
          this.$message({
            message: '添加成功',
            type: 'success'
          });
          this.dialogFormVisible = false
          this.getData()
        } else {
          this.$message.error(res.data.msg);
        }
      })
    },
    subMit(){
      if( this.formCalculate.num == '' ){
        this.$message.error('请输入单价');
        return false
      }

      addChannelProfitRecord({
        channelId: this.formCalculate.channelId,
        returnPrice: Number(this.formCalculate.num)
      }).then( res => {
        if( res.data.code == '200' ) {
          this.$message({
            message: '保存成功',
            type: 'success'
          });
          this.dialogFormVisibleCalculate = false
        } else {
          this.$message.error('保存失败');
        }
      })
    }
  }
}
</script>

<style scoped>
.pic{
  width: 150px;
  margin-top: 10px;
  margin-left: 10px;
}
.ok{
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color:rgb(35, 248, 124)
}
.fail{
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color: rgb(240, 174, 76);
}
.info{
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
}
.info-name{
  margin-left: 50px;
  margin-top: 10px;
  color:rgb(172, 176, 177);
}
.title{
  margin-top: 10px;
  margin-left: 10px;
  font-size: 20px;
  font-weight: 400;
}
.box{
  margin-top: 10px;
  width: 100%;
  border: solid rgb(138, 219, 230) 2px;
}
.nick{
  font-size: 30px;
  font-weight: 600;
}
.link-top {
  margin-left: 10px;
  margin-top: 10px;
  width: 100%;
  height: 2px;
  border-top: solid rgb(138, 219, 230) 2px;
}
.link-title {
  margin-left: 10px;
  margin-top: 10px;
  width: 80px;
  height: 2px;
  border-top: solid rgb(172, 176, 177) 2px;
}
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
